import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[],
    totalnum: 0,
    totalprice: 0,
    allCheckbox: JSON.parse(localStorage.getItem("allCheckbox")) || false,
    cart:JSON.parse(localStorage.getItem("Carts")) || [],
  },
  mutations: {
    getData(state,item) {
      state.list = item
    },
    //添加购物车
    addcart(state,item) {
       //判断 去重
       var flag = false;
       state.cart.map(ele => {
         if (ele.id === item.id) {
           ele.num++;
           flag = true;
         }
       })
 
       if (!flag) {//本地存储没有数据时添加
         item.num = 1;
         item.checked = false;
         state.cart.push(item);
       }
 
       //计算总价和总量
       state.totalnum = 0;
       state.totalprice = 0;
       state.cart.map(ele => {
         if (ele.checked) {
           state.totalnum += ele.num;
           state.totalprice += ele.num * ele.price;
         }
       })
 
      localStorage.setItem("Carts", JSON.stringify(state.cart));
    },

    //点击复选框
    onClick(state, obj) {
      console.log(obj)
      state.cart.map(ele => {
        if (ele.id == obj.id) {
          ele.checked = obj.checked;
        }
      });

      //计算总价和总量
      state.totalnum = 0;
      state.totalprice = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.totalnum += ele.num;
          state.totalprice += ele.num * ele.price;
        }
      })

      //同步全选状态
      state.allCheckbox = state.cart.every((ele) => {
        return ele.checked === true
      })

      localStorage.setItem("Carts", JSON.stringify(state.cart));
      localStorage.setItem("allCheckbox", JSON.stringify(state.allCheckbox))

    },

    //点击购物车实现商品加减
    onChange(state) {
      localStorage.setItem('Carts', JSON.stringify(state.cart));
      //计算总价和总量
      state.totalnum = 0;
      state.totalprice = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.totalnum += ele.num;
          state.totalprice += ele.num * ele.price;
        }
      })
    },

    //点击全选框
    onAllClick(state, boolean) {
      state.allCheckbox = boolean;
      state.cart.map(ele => {
        ele.checked = boolean;
      })

      //计算总价和总量
      state.totalnum = 0;
      state.totalprice = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.totalnum += ele.num;
          state.totalprice += ele.num * ele.price;
        }
      })

      localStorage.setItem("Carts", JSON.stringify(state.cart));
      localStorage.setItem("allCheckbox", JSON.stringify(state.allCheckbox));
    },


     //删除
     del(state, index) {
      state.cart.splice(index, 1);

      //计算总价和总量
      state.totalnum = 0;
      state.totalprice = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.totalnum += ele.num;
          state.totalprice += ele.num * ele.price;
        }
      })

      localStorage.setItem('Carts', JSON.stringify(state.cart));
    }
  },
  actions: {
    getData(context) {
      axios.get("http://localhost:8080/list.json")
      .then(res => {
        context.commit('getData',res.data.list);
      })
    },
    addcart(context,item) {
      context.commit('addcart',item)
    },
    onClick(context, obj) {
      context.commit('onClick', obj);
    },
    onAllClick(context, boolean) {
      context.commit('onAllClick', boolean)
    },
    onChange(context) {
      context.commit('onChange')
    },
    del(context,index) {
      context.commit('del',index);
    }
  },
  modules: {
  }
})
